<script setup lang="ts" name="RoleDetail">
import { DATA_SCOPE_COLUMN, DATA_SCOPE_ENUM } from "@/views/system/role/const";
import { deptTreeSelectApi, getRoleApi } from "@/api/system/role";
import { roleMenuTreeselectApi } from "@/api/system/menu";

const { proxy } = getCurrentInstance();

const { sys_normal_disable } = useDict("sys_normal_disable")

const emit = defineEmits(['closeDialog']);

// 菜单树组件
const menuRef = ref(null);

// 菜单树列表
const menuList = ref<OptionRecord[]>([])

// 部门树组件
const deptRef = ref(null);

// 部门树列表
const deptList = ref<OptionRecord[]>([])

const props = defineProps({
  id: {
    default: null,
  },
  title: {
    type: String,
    default: false,
  }
})
const open = ref(false);

const form = ref<RoleRecord>({});

/** 获取角色管理详情 */
function getData() {
  if (props.id || props.id === 0) {
    getRoleApi(props.id).then(response => {
      form.value = response.data;
      open.value = true;
    }).catch(() => {
      closeDialog(false);
    })
  } else {
    open.value = true;
  }
  getTreeMenu();
  getTreeDept();
}

/** 查询菜单树结构 */
async function getTreeMenu() {
    const { checkedKeys, menus } = await roleMenuTreeselectApi(props.id);

    menuList.value = menus;
    menuRef.value.setCheckedKeys(checkedKeys);
}

/** 根据角色ID查询部门树结构 */
async function getTreeDept() {
  const { checkedKeys, depts } = await deptTreeSelectApi(props.id);

  deptList.value = depts;
  deptRef.value.setCheckedKeys(checkedKeys);
}

/** 关闭弹窗 */
function closeDialog(refresh: boolean) {
  open.value = false;
  emit("closeDialog", refresh);
}

watch(open, (val) => {
  if (!val) {
    closeDialog(false);
  }
})

getData();
</script>

<template>
  <!-- 角色管理详情对话框 -->
  <el-dialog :title="title" v-model="open" width="700px" append-to-body>
    <div class="detail-form">
      <el-form ref="roleForm" :model="form" label-width="80px">
        <el-form-item label="角色名称" prop="roleName">
          {{ form.roleName }}
        </el-form-item>
        <el-form-item label="权限字符" prop="roleKey">
          {{ form.roleKey }}
        </el-form-item>
        <el-form-item label="角色顺序" prop="roleSort">
          {{ form.roleSort }}
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <dict-tag :options="sys_normal_disable" :value="form.status" />
        </el-form-item>
        <el-form-item label="菜单权限" prop="menuIds" class="item-describe">
          <el-tree
              class="tree-border"
              :data="menuList"
              ref="menuRef"
              node-key="id"
              :check-strictly="!form.menuCheckStrictly"
              empty-text="加载中，请稍候"
              :props="{ label: 'label', children: 'children' }"
          />
        </el-form-item>
        <el-form-item label="权限范围" prop="dataScope">
          <dict-tag :options="DATA_SCOPE_COLUMN" :value="form.dataScope" />
        </el-form-item>
        <el-form-item
            label="部门权限"
            prop="menuIds"
            class="item-describe"
            v-if="form.dataScope == DATA_SCOPE_ENUM.customDataScope"
        >
          <el-tree
              class="tree-border"
              :data="deptList"
              ref="deptRef"
              node-key="id"
              empty-text="加载中，请稍候"
              :props="{ label: 'label', children: 'children' }"
          ></el-tree>
        </el-form-item>
        <el-form-item label="备注" prop="remark" class="item-describe">
          {{ form.remark }}
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog(false)">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.tree-border{
  min-height: 60px;
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 12px;
}
</style>